<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <script>
    /*
      数组塌陷
        + 当你删除数组前面的数据的时候
        + 从你删除位置的数据开始, 后面的所有数据, 索引会先前递减
        + 我们管这个行为叫做 数组塌陷
    */

    // 需求: 数组 4 个数据, 遍历每次删除当前这个, 一次一个, 删除完毕数组
    var arr = [ 1, 1, 1, 1, 2, 2, 2, 3, 3, 3, 3, 4 ]
    console.log('原始数组 : ', arr)

    // 出现塌陷问题
    // for (var i = 0; i < arr.length; i++) {
    //   // i 就是当前这个数据的索引
    //   // aplice(开始索引, 多少个)
    //   arr.splice(i, 1)
    // }

    /*
      分析问题

      开始循环
        1. i === 0, len === 4, 条件为 true
           arr.splice(0, 1)
           删除之后 [ 2, 3, 4 ]
           i++
        2. i === 1, len === 3, 条件为 true
          arr.splice(1, 1)
          删除之后 [ 2, 4 ]
          i++
        3. i === 2, len === 2, 条件为 false
          结束循环

      解决问题的方向
        1. 不要塌陷: 从后面删除, 倒着循环数组
        2. 让循环控制变量退一步: i--
    */


    // 解决塌陷方案1
    // 倒着循环数组
    // for (var i = arr.length - 1; i >= 0; i--) {
    //   // i 依旧是数组内每一个的索引, 只不过是倒着的
    //   arr.splice(i, 1)
    // }

    /*
      分析问题

      1. i === 3; i >= 0; 条件为 true
         arr.splice(3, 1)
         删除之后, [1, 2, 3]
         i--
      2. i === 2; i >= 0; 条件为 true
         arr.splice(2, 1)
         删除之后, [ 1, 2 ]
         i--
      3. i === 1; i >= 0; 条件为 true
         arr.splice(1, 1)
         删除之后, [ 1 ]
         i--
      4. i === 0; i >= 0; 条件为 true
         arr.splice(0, 1)
         删除之后, []
         i--
      5. i === -1; i >= 0; 条件为 false
         循环结束
    */


    // 解决塌陷方案2:
    // i--
    // 只要你执行了 splice, 就执行一个 i--
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] % 2) {
        arr.splice(i, 1)
        i--
      }
    }

    /*
      分析问题

      1. i === 0; i < 4; 条件为 true
         arr.splice(0, 1)
         删除之后 [ 2, 3, 4 ]
         i--
         i++
      2. i === 0; i < 3; 条件为 true
         arr.splice(0, 1)
         删除之后 [ 3, 4 ]
         i--
         i++
      3. i === 0; i < 2; 条件为 true
         arr.splice(0, 1)
         删除之后 [ 4 ]
         i--
         i++
      4. i === 0; i < 1; 条件为 true
         arr.splice(0, 1)
         删除之后 []
         i--
         i++
      5. i === 0; i < 0; 条件为 false
         结束循环

    */

    console.log('删除之后 : ', arr)
  </script>
</body>
</html>
